<template>
    <div>
        <Nav></Nav>
        <v-title>支付完成</v-title>
        <el-row>
            <el-col :span="6" :offset="4">
                <h2>支付完成</h2>
            </el-col>
        </el-row>
        <el-row class="order">
            <div>
                <div>
                    <div>
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span v-if="orderSn != null && orderSn != ''">订单编号：{{orderSn}}</span>
                                <span v-else>非法操作</span>
                            </div>
                            <br />
                            <div v-if="show != 0">
                                <el-steps :active="3">
                                    <el-step title="步骤 1" description="填写订单信息"></el-step>
                                    <el-step title="步骤 2" description="开始支付"></el-step>
                                    <el-step title="步骤 3" description="支付完成"></el-step>
                                </el-steps>
                            </div>
                            <div class="text item">
                                <el-row v-if="show == 1">
                                    <el-col :md="12" :offset="6">
                                        <el-result icon="success" title="支付成功~" subTitle="点击按钮可以返回首页~">
                                            <template slot="extra">
                                                <el-button type="primary" size="medium" @click="back">返回首页</el-button>
                                            </template>
                                        </el-result>
                                    </el-col>
                                </el-row>
                                <el-row v-if="show == 2">
                                    <el-col :md="12" :offset="6">
                                        <el-result icon="error" title="您已取消支付~" subTitle="点击按钮可以返回首页~">
                                            <template slot="extra">
                                                <el-button type="primary" size="medium" @click="back">返回首页</el-button>
                                            </template>
                                        </el-result>
                                    </el-col>
                                </el-row>
                                <el-row v-if="show == 0">
                                    <el-col :md="12" :offset="6">
                                        <el-result icon="warning" title="非法操作~" subTitle="点击按钮可以返回首页~">
                                            <template slot="extra">
                                                <el-button type="primary" size="medium" @click="back">返回首页</el-button>
                                            </template>
                                        </el-result>
                                    </el-col>
                                </el-row>
                            </div>
                            <br />
                        </el-card>
                        <br /><br />
                    </div>
                </div>
                <el-backtop />
            </div>
        </el-row>
    </div>
</template>

<script>
import Nav from "@/components/Nav";
import VTitle from "@/components/Title";
import { getCartInfo, createOrder, getGameGoodsDetail } from "@/api/index";
export default {
    created() {
        this.getData();
    },
    data() {
        return {
            show: 0,
            orderSn: ''
        };
    },
    components: {
        Nav,
        VTitle
    },
    methods: {
        getData() {
            if (this.$route.query.param.show != null && this.$route.query.param.orderSn != null) {
                this.show = this.$route.query.param.show;
                this.orderSn = this.$route.query.param.orderSn;
            }
        },
        back() {
            this.$router.push("/home")
        }

    }
}
</script>

<style lang="less" scoped>
h2 {
    float: left;
    height: 34px;
    line-height: 34px;
    font-size: 24px;
    position: relative;
    margin-bottom: 20px;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei";
}

.order {
    width: 50%;
    margin-left: 25%;
}

.spanName {
    font-size: 25px;
    color: #2abaca;
    font-weight: bolder;
}

.old-name {
    color: #000;
}

.detailContent {
    font-size: 12px;
    line-height: 20px;
    display: block;
    color: #9497a0;
}

.detailContentPrice {
    font-size: 16px;
    line-height: 20px;
    display: block;
    color: red;
    font-weight: bold;
}

.detailContentNum {
    font-size: 16px;
    line-height: 20px;
    display: block;
    color: black;
    font-weight: bold;
}

.detailContentNormal {
    font-size: 16px;
    line-height: 20px;
    display: block;
    color: black;
}
</style>